<template>
  <div class="all-parkinglot-container">
    <div class="left-menu-list">
      <a
        v-for="(item, index) in tabData"
        :key="item.name"
        href="javascript:;"
        :class="{ active: currentTab === item.name }"
        @click="setCurrentTab(item.name)"
      >
        <i :class="['menu-icon', item.iconName]"></i>
        {{ item.name }}
      </a>
    </div>
    <div class="right-content">
      <ParkingLotInfo v-if="currentTab === '车场信息'" :park-id="parkId"></ParkingLotInfo>
      <Rule v-if="currentTab === '收费规则'"></Rule>
      <Channel v-if="currentTab === '通道配置'"></Channel>
      <EmergencyEdit v-if="currentTab == '告警配置'" :park-id="parkId"></EmergencyEdit>
      <AreaConfig v-if="currentTab == '区域配置'" :park-id="parkId"></AreaConfig>
      <DeviceSetting v-if="currentTab == '设备管理'"></DeviceSetting>
      <ParkinglotFeature v-if="currentTab == '车场配置'" :park-id="parkId"></ParkinglotFeature>
    </div>
  </div>
</template>

<script>
import ParkingLotInfo from "../ParkingLotInfo/index.vue";
import Rule from "../Rule/RulePreview.vue";
import Channel from "../Channel/index.vue";
import EmergencyEdit from "../Emergency/emergency_config.vue";
import AreaConfig from "../Area/area_preview.vue";
import DeviceSetting from "../DeviceSetting/index.vue";
import ParkinglotFeature from "../ParkinglotFeature/index.vue";

export default {
  name: "allParkinglotInfo",
  components: {
    ParkingLotInfo,
    Rule,
    Channel,
    EmergencyEdit,
    AreaConfig,
    DeviceSetting,
    ParkinglotFeature
  },
  created() {
    this.parkId = this.$route.query.parkId;
    if (this.$route.query.currentTab) {
      this.currentTab = this.$route.query.currentTab;
    }

    if (this.$route.query.parkType === "0") {
      let tabData = [
        {
          name: "车场信息",
          iconName: "icon-ic_pc_baseinfo",
          auth: "PARK:CONFIG:MANAGE:PARK_BASE"
        },
        {
          name: "车场配置",
          iconName: "icon-STAT_PARKING",
          auth: "PARK:CONFIG:MANAGE:CONFIG"
        },
        {
          name: "告警配置",
          iconName: "icon-PARK_EMERGENCY",
          auth: "PARK:CONFIG:MANAGE:ALARM"
        }
      ];
      if (
        (this.$route.query.hasOwnProperty("centralMonitor") &&
          this.$route.query.centralMonitor === true) ||
        this.$route.query.centralMonitor === "true"
      ) {
        tabData.push({
          name: "设备管理",
          iconName: "icon-device_setting",
          auth: "PARK:CONFIG:MANAGE:DEVICE"
        });
      }
      this.tabData = this.filterPermsMenu(tabData);
    } else if (
      this.$route.query.parkType === "1" ||
      !this.$route.query.parkType
    ) {
      let tabData = [
        {
          name: "车场信息",
          iconName: "icon-ic_pc_baseinfo",
          auth: "PARK:CONFIG:MANAGE:PARK_BASE"
        },

        {
          name: "收费规则",
          iconName: "icon-ic_pc_payrule",
          auth: "PARK:CONFIG:MANAGE:CHARGE_RULE"
        },

        {
          name: "通道配置",
          iconName: "icon-ic_pc_passageway",
          auth: "PARK:CONFIG:MANAGE:CHANNEL"
        },

        {
          name: "设备管理",
          iconName: "icon-device_setting",
          auth: "PARK:CONFIG:MANAGE:DEVICE"
        },
        {
          name: "车场配置",
          iconName: "icon-STAT_PARKING",
          auth: "PARK:CONFIG:MANAGE:CONFIG"
        },
        {
          name: "告警配置",
          iconName: "icon-PARK_EMERGENCY",
          auth: "PARK:CONFIG:MANAGE:ALARM"
        },
        {
          name: "区域配置",
          iconName: "icon-ic_pc_area",
          auth: "PARK:CONFIG:MANAGE:AREA"
        }
      ];

      this.tabData = this.filterPermsMenu(tabData);
    }
  },
  data() {
    return {
      tabData: [],
      currentTab: "车场信息",
      parkId: null,
      parkName: null
    };
  },
  methods: {
    setCurrentTab(tabName) {
      this.currentTab = tabName;
      this.$route.query.currentTab = tabName;
    },
    filterPermsMenu(tabs) {
      return tabs.filter(item => this.perms.indexOf(item.auth) !== -1);
    }
  },
  computed: {
    perms() {
      return this.$store.getters.getPerms;
    }
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
